<template>
  <!-- <div class="mask" v-if="showMask"></div> -->
  <div class="box">
    <div class="box-content">
      <el-table :data="getDataList1" border stripe style="width: 100%;height:calc(100% - 50px)" :height="tableH">
        <el-table-column type="index" width="80" label="序号" align="center" show-overflow-tooltip />
        <!-- <el-table-column prop="thing" label="定值修改事件" align="center" show-overflow-tooltip />
        <el-table-column prop="start" label="开始时间" align="center" show-overflow-tooltip />
        <el-table-column prop="end" label="结束时间" align="center" show-overflow-tooltip />
        <el-table-column prop="count" label="信号总数" align="center" show-overflow-tooltip />
        <el-table-column label="信号详情" width="100" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleClick(row)">查看</el-button>
          </template>
        </el-table-column> -->
        <el-table-column prop="belonging_station" label="厂站名称" align="center" show-overflow-tooltip />
        <el-table-column prop="device" label="装置名称" align="center" show-overflow-tooltip />
        <el-table-column prop="begin_time" label="开始时间" align="center" show-overflow-tooltip />
        <el-table-column prop="end_time" label="结束时间" align="center" show-overflow-tooltip />
        <el-table-column prop="number" label="信号总数" align="center" show-overflow-tooltip />
        <el-table-column prop="set_value_modification" label="操作事件" align="center" show-overflow-tooltip />
        <el-table-column label="信号详情" width="100" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[30, 50, 100]"
          :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <div class="line-box"></div>
    <div class="box-content">
      <div class='scroll-content'>
        <div class="modal-content"></div>
        <el-table :data="historyDataList" ref="tableRef" border stripe style="width: 100%" :height="tableH">
          <el-table-column type="index" width="60" label="序号" align="center" show-overflow-tooltip />
          <el-table-column prop="主站接收时间" label="主站接收时间" width="160" align="center" show-overflow-tooltip />
          <el-table-column prop="所属厂站" label="所属厂站" align="center" show-overflow-tooltip />
          <el-table-column prop="装置" label="装置" align="center" show-overflow-tooltip />
          <el-table-column prop="遥信点" label="遥信点" align="center" show-overflow-tooltip />
          <el-table-column prop="值" label="值" width="80" align="center" show-overflow-tooltip />
          <el-table-column prop="标签" label="标签" align="center" show-overflow-tooltip />
        </el-table>
      </div>

    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import hisRecord from "@/api/hisRecord";

const historyDataList = ref([])
const tableData = ref([])
const getDataList = ref([])
const getDataList1 = ref([])
let tableH = ref(0);
let tableRef = ref()

const currentPage = ref(1);
const pageSize = ref(20);
let total = ref(1);

let timer = null;
let nums = 0
const easeStep = [5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0]
const scroll = () => {
  // 在执行新的计时器前将之前的计时器清除
  if (timer) clearInterval(timer);
  let status = true;
  // 获取表格滚动区域的dom
  const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
  // console.log('scrollDom', scrollDom.getElementsByClassName('el-table__row')[0].offsetHeight)
  // scrollDom.style.transition = 'all 1s ease'
  // 增加监听事件鼠标移入停止滚动
  // scrollDom.addEventListener('mouseover', () => {
  //   status = false;
  // });
  // // 鼠标移出恢复滚动
  // scrollDom.addEventListener('mouseout', () => {
  //   status = true;
  // });
  // 设置每秒滚动一行
  timer = setInterval(() => {
    if (status) {
      nums++
      if (nums % 20 === 0) {
        setDataList(getDataList.value, (nums / 20) + '')
      }
      // console.log(easeStep[(nums % 5 === 0 ? 4 : (nums % 5 - 1))])
      // 设置每次滚动的像素
      // scrollDom.scrollTop += easeStep[(nums % 12 === 0 ? 11 : (nums % 12 - 1))];
      scrollDom.scrollTop += 20
      console.log('scrollDom.scrollTop', scrollDom.scrollTop)
      // 当滚动到底部时修改scrollTop回到顶部
      if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) {
        scrollDom.scrollTop = 0;
      }
    }
    //控制速度
  }, 200);
}
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  currentPage.value = 1;
  pageSize.value = val;
  pageData.value = getPagedData();
};

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  // pageData.value = getPagedData();
};
const setDataList = (data, num) => {
  // console.log('num', num)
  // console.log('data', data)
  if (data) {
    // getDataList.value.push(data[num])
    let arr = data.filter(item => {
      // console.log('item', Number(item.set_value_modification), num)
      return item.set_value_modification == num
    })
    console.log('arr', arr)
    if (arr && arr.length > 0)
      getDataList1.value = getDataList1.value.concat(arr)
  }
}
//设置定时器进行自滚动
const getData = () => {
  setTimeout(() => { scroll() }, 5)
}
onUnmounted(() => {
  // 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
})

onMounted(async () => {
  nextTick(() => {
    tableH.value = (window.innerHeight - 100) / 2 - 30;
  });
  await onLoad();
});
const getDataGrp = () => {
  hisRecord
    .getHisRecordList1({
      out_file: "out_20240704063943_test_data.xlsx"
    })
    .then((res) => {
      console.log(res.data);
      // 1:正常；0:异常；
      if (res && res.data.code === 1) {
        getDataList.value = [];
        if (res.data.data_grp) {
          getDataList.value = res.data.data_grp
          // for (const key in res.data.data.data_info) {
          //   const obj = res.data.data.data[key];
          //   historyDataList.value.push(obj);
          // }
        } else {
          getDataList.value = [];
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
/** 加载数据 */
const onLoad = () => {
  hisRecord
    .getSlide()
    .then((res) => {
      console.log(res.data);
      // 1:正常；0:异常；
      if (res && res.data.code === 1) {
        historyDataList.value = [];
        if (res.data.data_info) {
          historyDataList.value = res.data.data_info
          // for (const key in res.data.data.data_info) {
          //   const obj = res.data.data.data[key];
          //   historyDataList.value.push(obj);
          // }
        } else {
          historyDataList.value = [];
        }
        getDataGrp()
      }
    })
    .catch((err) => {
      console.log(err);
    });
  getData()
};
// row, column,
const formatterStatus = (cellVal) => {
  let text = "";
  switch (cellVal) {
    case 1:
      text = "推理中";
      break;
    case 0:
      text = "已完成";
      break;
    case -1:
      text = "推理失败";
      break;
  }
  return text;
};

// 下方表格逻辑
const handleClick = (row) => {
  // 筛选上面表格数据
  console.log("click", row);
  const time = new Date().getTime();
  emit("tabVal", true, row.out_file, row.out_file, time, row.set_value_modification,);
};

const emit = defineEmits(["tabVal"]);
</script>
<style scoped>
:deep(.el-scrollbar) {
  transition: all 1s ease
}

:deep(.el-scrollbar__view) {
  transition: all 1s ease
}

:deep(.el-table__body) {
  transition: all 1s ease
}

:deep(.el-table__body) {
  will-change: transform;
  transition: all 1s ease;
}

:deep(.el-table__body-wrapper) {
  transition: all 1s ease;
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.line-box {
  border: 1px solid #2590ff;
  margin-bottom: 5px;
}

.box-content {
  position: relative;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  height: 50%;

  .scroll-content {
    border: 1px solid #2590ff;
  }
}

.modal-content {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.page-box {
  margin: 10px 0;
  height: 30px;
  text-align: center;
}

.upload-box {
  text-align: center;
  padding-right: 30px;
  /* margin-top: 30px;
  padding-bottom: 30px; */
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.button-div {
  display: flex;
  justify-content: center;
  margin: 30px auto;
}
</style>
